<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<uni-popup ref="popup" type="center" :mask-click="false"  @change="change">
		<view class="popup">
			<view class="p-title">
				获赞与收藏
			</view>
			<view class="p-content">
				<view class="">
					<view class="">
						<image src="/static/mine/like.svg" mode=""></image>
						<text>当前获得点赞数</text>
					</view>
					<text>11</text>
				</view>
				<view class="">
					<view class="">
						<image src="/static/mine/colle.svg" mode=""></image>
						<text>当前获得点赞数</text>
					</view>
					<text>11</text>
				</view>
			</view>
			<view class="p-btn" @click="handleClose">我知道了</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const show = ref(false)
	const change = (e) => {
		show.value = e.show
	}
	const popup = ref()
	const handleClose = () => {
		popup.value.close()
	}
	defineExpose({
		popup
	})
</script>

<style lang="scss" scoped>
	.popup {
		background-color: #fff;
		border-radius: 16rpx;
		width: 596rpx;
		box-sizing: border-box;
		padding: 40rpx 68rpx;

		.p-title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			text-align: center;
		}

		.p-content {
			padding: 30rpx 36rpx;
			>view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				>view {
					display: flex;
					align-items: center;
					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 24rpx;
						margin-left: 16rpx;
					}
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 32rpx;
				}
			}
			>view:last-child{
				margin-bottom: 0;
			}
		}

		.p-btn {
			width: 100%;
			height: 80rpx;
			background: #16DFF2;
			border-radius: 4rpx;
			line-height: 80rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>